<template>
  <div class="bc" v-bind:style="{'height':clientHeight + 'px'}">
    <div class="detail">
      <div class="head">故障排查</div>
      <div class="msg-list">
        <div class="msg-item" v-for="(item, index) in msg" :key="'error' + index">{{index + 1}}、{{item.info}}</div>
      </div>
    </div>
    <!--<div class="input-button blue" v-show="btnMsg !== 'hidden'">{{btnMsg}}</div>-->
    <div @click="$router.back(-1)" class="input-button white">返回上一页面</div>
  </div>
</template>

<script>
export default {
  name: 'errorDetail',
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      type: 'gray',
      msg: [],
      btnMsg: ''
    }
  },
  created () {
    this.type = this.$route.params.type
    if (this.type === 'gray') {
      // 设备不在线
      this.btnMsg = 'hidden'
      this.msg = [
        {'info': '确定是否插上电源，如果没有则重新插拔电源，观察灯是否亮起'}
      ]
    } else if (this.type === 'blue') {
      // 连接数异常
      this.btnMsg = '查看连接设备'
      this.msg = [
        {'info': '修改您的密码 防止被蹭网'}
      ]
    } else if (this.type === 'yellow') {
      // 信号异常
      this.btnMsg = '重启设备'
      this.msg = [
        {'info': '设备所在位置4G覆盖存在问题，改变位置查看情况'},
        {'info': '附近是否存在遮挡'}
      ]
    } else if (this.type === 'red') {
      this.btnMsg = '充值流量'
      this.msg = [
        {'info': '当前设备流量不足前往商城充值流量'}
      ]
    }
  }
}

</script>

<style scoped>
  .bc {
    width: 100%;
    background-color: #ebebeb;
    padding-top: 0.25rem;
  }
  .detail{
    width: 7rem;
    margin:0 auto;
    padding-bottom: 2rem ;
    padding-left: 0.17rem;
    background-color: #fff;
    padding-top: 0.3rem;
    border-radius: 0.12rem;
  }
  .head{
    font-size: 0.36rem;
    color: #545151;
  }
  .msg-list{
    margin-top: 0.4rem;
  }
  .msg-item{
    font-size: 0.3rem;
    line-height: 0.55rem;
    color: #918f8f;
  }

  .white{
    background-color: #fff;
    color: #0092f8;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    margin-top: 0.28rem;
  }
  .blue{
    margin-top: 1.6rem;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    background-color: #0092f8;
  }
</style>
